<template>
  <a-modal v-model:open="open" :title="modalTitle" :confirm-loading="loading" @ok="handleOk">
    <a-form :label-col="{span:5}" :wrapper-col="{span:18}" :model="form" ref="formRef">
      <a-form-item label="所属模块" :rules="[{required:true,message:'请选择所属模块'}]" name="model">
        <a-radio-group v-model:value="form.type" name="model" button-style="solid">
          <a-radio-button :value="item.value" v-for="item in categoryType">
            {{item.label}}
          </a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="分类名称"
                   help="分类名称限制8个字以内" name="name"
                   :rules="[{required:true,message:'请输入分组名称'}]">
        <a-input v-model:value="form.name" placeholder="输入输入分类名称" show-count :maxlength="8"/>
      </a-form-item>
      <a-form-item label="上级分类" name="pid" help="支持二级分类，请合理安排层级">
        <a-select v-model:value="form.pid">
          <a-select-option :value="0">一级分类</a-select-option>
          <a-select-option v-for="item in categories" :key="item.id" :value="item.id">
            {{item.name}}
          </a-select-option>
        </a-select>
      </a-form-item>
      <form-item :col="[5,18]" label="状态">
        <a-switch v-model:checked="form.status"
                  checked-children="启用"
                  un-checked-children="禁用"
                  :checkedValue="1"
                  :unCheckedValue="0"/>
      </form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import FormItem from "@/components/FormItem.vue";
import {type PropType, computed, reactive, ref, watch} from "vue";
import {categoryType} from "@/config/category.ts";
import {useRoute} from "vue-router";
import {useCategoryStore} from "@/store/modules/category.ts";
import {getCategoryTree} from "@/utils/treeDataFormat.ts";

const store = useCategoryStore()
const route = useRoute()
const open = defineModel<boolean>('open', {default:false})
const loading = ref<boolean>(false)
const props = defineProps({
  formData: {
    type: Object as PropType<Category>,
    default: () => ({})
  }
})
const categories = ref<Category[]>([])
const modalTitle = computed(() => {
  return props.formData.id ? '编辑分类' : '新增分类'
})
const formRef = ref()
const form = reactive<CategoryForm>({
  id: 0,
  name: '',
  type: '',
  pid:0,
  status: 1
})
watch(()=>props.formData,()=>{
  if (props.formData.id){
    Object.assign(form,props.formData)
  }else {
    Object.assign(form,{
      id: 0,
      name: '',
      type: route.query.active_key as string || '',
      pid: 0,
      status: 1
    })
  }
}, {immediate: true})
watch(() => form.type, (mod) => {
  if (!mod){
    mod = route.query.active_key as string || 'project'
  }
  const cate = store.dataSource.filter(item => item.type === mod)
  categories.value = getCategoryTree(cate)
})
const handleOk = async () => {
  loading.value = true
  try {
    await formRef.value?.validate()
    const res = props.formData.id
      ? await store.update(form)
      : await store.create(form)
    if (res) {
      open.value = false
      formRef.value?.resetFields()
    }
  }catch{}
  finally {
    setTimeout(()=>loading.value = false,3000)
  }
}
</script>

<style scoped>

</style>